<template>
    <div>
        <div class="action-area">
            <el-button :class="['action-btn',activeBtn?'action-btn-active':'']" @click="()=>{
                this.activeBtn = 1
            }">血橙</el-button>
            <el-button :class="['action-btn',activeBtn?'':'action-btn-active']" @click="()=>{
                this.activeBtn = 0
            }">沃柑</el-button>
        </div>
        <div class="progress-area" v-show="activeBtn===1">
            <div class="progress-item-title">
                地块一
            </div>
            <div class="progress-item">
                <div class="flex-row">
                    <el-progress :percentage="65" :stroke-width="4" color="#F8733B" :format="format" ></el-progress>
                    <div class="progress-item-value">3452.6</div>
                </div>
                <div class="progress-item-tips">
                    种植面积（m²）
                </div>
                <div class="flex-row">
                    <el-progress :percentage="60" :stroke-width="4" color="#F8733B" :format="format" ></el-progress>
                    <div class="progress-item-value">219</div>
                </div>
                <div class="progress-item-tips">
                    种植棵数（棵）
                </div>
            </div>
        </div>
        <div class="progress-area" v-show="activeBtn===0">
            <div class="progress-item-title">
                地块二
            </div>
            <div class="progress-item">
                <div class="flex-row">
                    <el-progress :percentage="45" :stroke-width="4" color="#F8733B" :format="format" ></el-progress>
                    <div class="progress-item-value">2440.8</div>
                </div>
                <div class="progress-item-tips">
                    种植面积（m²）
                </div>
                <div class="flex-row">
                    <el-progress :percentage="40" :stroke-width="4" color="#F8733B" :format="format" ></el-progress>
                    <div class="progress-item-value">170</div>
                </div>
                <div class="progress-item-tips">
                    种植棵数（棵）
                </div>
            </div>
        </div>

    </div>
</template>

<script>
    export default {
        name: "Otype",
        methods:{
            format(){
                return ''
            }
        },
        data(){
            return{
                activeBtn:1
            }
        }
    }
</script>

<style scoped lang="less">
    .action-btn{
        width: 58px;
        height: 30px;
        font-size: 14px;
        margin-left: 8px;
        margin-bottom: 20px;
        color: #BEBEBE;
        background: #333333;
        border: 1px solid rgba(123,123,123,1);
        border-radius: 2px;
        padding: 6px 15px;
        font-family: 'ziticqtezhanti';
    }
    .action-btn-active{
        font-size: 14px;
        color: #FFFFFF;
        background: #482006;
        border: 1px solid rgba(248,115,59,1);
    }
    .progress-area{
        padding: 0 10px;
       .progress-item-title{
           font-family: 'ziticqtezhanti';
           font-size: 14px;
           color: #FFFFFF;

       }
        .progress-item-value{
            margin-left: 5px;
            font-size: 24px;
            color: #B0B0B0;
        }
        .progress-item-tips{
            font-size: 10px;
            color: #B0B0B0;
            margin-top: -20px;
            margin-bottom: 8px;
        }

    }
    /deep/ .el-progress-bar{
        width: 320px;
    }
    /deep/ .el-progress-bar__outer{
        background-color: #3B3B3B;
    }
    .progress-item-line{
        width: 363px;
        height: 1px;
        background: #333;
        margin: 10px 0;
    }
</style>
